<template lang="pug">
  el-drawer.commonDrawer(
    title="线索跟进"
    :visible="visibleDialog"
    append-to-body
    center
    destroy-on-close
    direction="rtl"
    size="720px"
    wrapperClosable
    @close="$_handleCancel"
  )
    .drawer-content
      form-box(
        ref="form"
        :fields="fields"
        :showBtns="false"
        labelWidth="120px"
        :layoutCol="{ xs: 12, md: 12, lg: 12 }"
      )
    .drawer-footer.tr
      el-button.gradientVertical(size="large" :loading="submitting" @click="submitHandle" round) 确定
</template>
<script>
import { mapGetters } from 'vuex'
import { clueFollow, attachmentList } from '../api'

export default {
  props: {
    info: {
      type: Object,
      default: () => ({})
    },
    id: {
      type: String,
      default: ''
    },
    // clue(线索), client(客户)， contract(合同)
    type: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      submitting: false
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    fields () {
      const { info, type } = this
      return [
        {
          key: 'channel',
          label: '跟进方式',
          type: 'select',
          required: true,
          fieldProps: {
            dictKey: 'clueFollowTypes'
          },
          initialValue: '1'
        },
        {
          key: type === 'clue' ? 'leadsStatus' : 'clienteleStatus',
          label: '跟进状态',
          type: 'select',
          required: true,
          hidden: type === 'client' && info.signStatus === 1,
          fieldProps: {
            dictKey: type === 'clue' ? 'clueStatus' : 'clientStatus'
          },
          events: {
            change: val => this.formChange(val, 'status')
          },
          initialValue: info[type === 'clue' ? 'leadsStatus' : 'clienteleStatus'] && info[type === 'clue' ? 'leadsStatus' : 'clienteleStatus'].string()
        },
        {
          key: 'statusVal',
          label: '状态名称',
          hidden: !(type === 'client' && info.clienteleStatus === '12'),
          initialValue: info.statusVal
        },
        {
          key: 'actualFollowDate',
          label: '实际跟进时间',
          type: 'datetime',
          required: true,
          formatFlag: true,
          initialValue: new Date()
        },
        {
          key: 'nextTime',
          label: '下次跟进时间',
          type: 'datetime',
          required: true,
          formatFlag: true,
          initialValue: new Date()
        },
        {
          key: 'content',
          label: '跟进详情',
          type: 'textarea',
          layoutCol: { xs: 24, md: 24, lg: 24 }
        },
        {
          key: 'imgUrl',
          label: '上传图片',
          type: 'upload',
          layoutCol: { xs: 24, md: 24, lg: 24 },
          fieldProps: {
            accept: 'image/*',
            'list-type': 'picture'
          }
        },
        {
          key: 'attachmentUrl',
          label: '上传文件',
          type: 'upload',
          layoutCol: { xs: 24, md: 24, lg: 24 }
        }
      ]
    }
  },
  methods: {
    formChange (val, key) {
      if (key === 'status' && this.type === 'client') {
        this.clientStatus = val
        this.info.clienteleStatus = val
      }
    },
    async submitHandle () {
      const { id, type, info, curArea } = this
      const values = await this.$refs.form.submitForm()
      const attachmentUrl = values.attachmentUrl.map(x => x.url).filter(x => !!x)
      const imgUrl = values.imgUrl.map(x => x.url).filter(x => !!x)
      const params = {
        ...values,
        type: type === 'clue' ? 'leads' : 'clientele',
        areaId: curArea.areaId,
        [`${type === 'clue' ? 'leads' : 'clienteles'}Id`]: id,
        staffId: info.staffId,
        staffName: info.staffName,
        imgUrl: imgUrl.map(x => x.url).join(),
        attachmentUrl: attachmentUrl.map(x => x.url).join()
      }
      if (type === 'client') {
        params.leadsId = info.leadsId
      }
      // 添加跟进
      clueFollow(params).then(() => {
        // 添加附件
        attachmentUrl.forEach(file => {
          attachmentList({
            [`${type === 'clue' ? 'leads' : 'clienteles'}Id`]: id,
            name: file.name,
            attachmentUrl: file.url
          })
        })
        this.$message.success('跟进成功')
        this.$emit('getInfo')
        this.$_handleCancel()
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
